<template>
    <div class="view-nav-wrapper page-wrapper">
      <div class="top-nav container">
        <div class="top-wrapper left">
          <span>
            <img :src='require("../assets/tju-logo.png")' />
            <img :src='require("../assets/tanklab-white.png")' />
            <h3 v-if="$store.state.language === 'zh-CN'">智慧物联网与大数据研究小组</h3>
            <h3 v-else>Smart IoT & Big Data Research Group</h3>
          </span>
        </div>
        <div class="top-wrapper right">
          <span>
           <i class="el-icon-s-comment"></i>
            qiutie@ieee.org
          </span>
          <span>
             <i class="el-icon-phone"></i>
            +86-22-85356782
          </span>
          <span @click="handleChangeLanguage">
            {{$store.state.language === 'zh-CN' ? 'English' : '中文'}}
          </span>
        </div>
      </div>
      <div class="nav-wrapper container">
        <div  class="menu-item">
            <router-link to="/" v-if="$store.state.language === 'zh-CN'">
              首页
            </router-link>
            <router-link to="/en" v-else>
              Home
            </router-link>
        </div>
<!--        <div  class="menu-item">-->
<!--          <router-link to="/Course">-->
<!--                {{$store.state.language === 'zh-CN' ? '主讲课程' : 'Course'}}-->
<!--            </router-link>-->
<!--        </div>-->
        <div  class="menu-item">
          <router-link to="/DirectionAndProject">
            {{$store.state.language === 'zh-CN' ? '研究课题' : 'Research&Funds'}}
          </router-link>
        </div>
        <div  class="menu-item">
          <router-link to="/Papers">
            {{$store.state.language === 'zh-CN' ? '论文著作' : 'Publications'}}
          </router-link>
        </div>
<!--        <div  class="menu-item">-->
<!--          <router-link to="/Direction">-->
<!--                {{$store.state.language === 'zh-CN' ? '研究方向' : 'Direction'}}-->
<!--          </router-link>-->
<!--        </div>-->
<!--        <div  class="menu-item">-->
<!--          <router-link to="/Project">-->
<!--                {{$store.state.language === 'zh-CN' ? '项目课题' : 'Project'}}-->
<!--            </router-link>-->
<!--        </div>-->
        <div  class="menu-item">
          <router-link to="/Result">
            {{$store.state.language === 'zh-CN' ? '研究成果' : 'Platform&Patents'}}
          </router-link>
        </div>
<!--        <div class="menu-item">-->
<!--           {{$store.state.language === 'zh-CN' ? '研究成果' : 'Research'}}-->
<!--          <div class="submenu">-->
<!--                <router-link to="/Book">-->
<!--                    <div class="submenu-item">-->
<!--                    {{$store.state.language === 'zh-CN' ? '著作' : 'Book'}}-->
<!--                    </div>-->
<!--                </router-link>-->
<!--                <router-link to="/Patent">-->
<!--                    <div class="submenu-item">-->
<!--                    {{$store.state.language === 'zh-CN' ? '专利' : 'Patent'}}-->
<!--                    </div>-->
<!--                </router-link>-->

<!--                <router-link to="/Papers">-->
<!--                    <div class="submenu-item">-->
<!--                    {{$store.state.language === 'zh-CN' ? '论文' : 'Papers'}}-->
<!--                     </div>-->
<!--                </router-link>-->

<!--                <router-link to="/Achievement">-->
<!--                    <div class="submenu-item">-->
<!--                    {{$store.state.language === 'zh-CN' ? '成果' : 'Achievement'}}-->
<!--                    </div>-->
<!--                </router-link>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="menu-item">-->
<!--           {{$store.state.language === 'zh-CN' ? '小组成员' : 'Member'}}-->
<!--          <div class="submenu">-->
<!--                <router-link to="/Students">-->
<!--                    <div class="submenu-item">-->
<!--                    {{$store.state.language === 'zh-CN' ? '研究生' : 'Postgraduate'}}-->
<!--                    </div>-->
<!--                </router-link>-->
<!--                <router-link to="/Alumnus">-->
<!--                    <div class="submenu-item">-->
<!--                    {{$store.state.language === 'zh-CN' ? '优秀校友' : 'Alumni'}}-->
<!--                    </div>-->
<!--                </router-link>-->
<!--          </div>-->
<!--        </div>-->
        <div  class="menu-item">
          <router-link to="/Academic_work">
                {{$store.state.language === 'zh-CN' ? '学术兼职' : 'Professional Services'}}
            </router-link>
        </div>
        <div  class="menu-item">
          <router-link to="/New">
                {{$store.state.language === 'zh-CN' ? '新闻通知' : 'News'}}
            </router-link>
        </div>
        <div  class="menu-item">
          <router-link to="/LabCulture">
                {{$store.state.language === 'zh-CN' ? '实验室文化' : 'Lab Culture'}}
            </router-link>
        </div>
      </div>
    </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Menu extends Vue {

  handleChangeLanguage() {
    if (this.$store.state.language === 'zh-CN') {
      this.$store.commit("changeLanguage");
      this.$router.push("/en");
    } else {
      this.$store.commit("changeLanguage");
      this.$router.push("/");
    }
    // window.location.reload();
  }
}

</script>

<style lang="scss" scoped>
.view-nav-wrapper{
    width: 100%;
    text-align: center;
    padding: 0 30px;
    box-sizing: border-box;
    .container{
      margin: auto;
    }
}
.top-nav{
  text-align: left;
  background: #113f6c;
  border-bottom: 1px solid rgba(66, 66, 66, 0.8);
  position: relative;
  width: 1200px;
  margin: auto;
  height: 50px;
}
.top-wrapper{
  display: inline-block;
  color: white;
  height: 50px;
  padding-left: 20px;
  &.left{
    span{
      border-right: 1px solid rgba(66, 66, 66, 0.2);
      &:last-child{
        border: none;
        font-size: 22px;
        i{
          margin-right: 10px;
        }
      }
    }
    img{
        height: 50px;
    }
    h3{
        display: inline-block;
        font-size: 16px;
        margin: 0;
        line-height: 50px;
        vertical-align: top;
        margin: 0 10px;
    }
  }
  &.right{
    float: right;
    span{
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      padding: 17px 17px 19px 22px;
      font-size: 16px;
      line-height: 50px;
      i{
        margin-right: 5px;
      }
      &:hover{
          background: rgba(0, 0, 0, 0.2);
          color: rgb(4, 121, 231);
          cursor: pointer;
      }
    }
  }
}
.nav-wrapper{
  z-index: 1000;
  position: relative;
  text-align: left;
  box-sizing: border-box;
  background: #f5ae54;
  color: white;
  width: 1200px;
  overflow: visible;
  padding-left: 20px;
  .menu-item{
    display: inline-block;
    position: relative;
    margin-right: 30px;
    line-height: 60px;
    height: 100%;
    overflow: visible;
    font-size: 17px;
    font-weight: 600;
    i{
      margin-left: 5px;
      font-size: 12px;
      transition: transform 0.3s ease-in-out;
    }
    a{
        color: white;
        text-decoration: none;
        &:hover, &.router-link-exact-active {
            color: #113f6c;
        }
    }
    .submenu{
      color: #1f2326;
      display: block;
      width: 130px;
      padding-top: 0px;
      border-radius: 5px;
      position: absolute;
      z-index: 2000;
      top: 40px;
      opacity: 0;
      pointer-events: none;
      &::before{
        display: block;
        content: "";
        width: 15px;
        height: 15px;
        background:  rgba(66, 66, 66, 1);
        position: relative;
        transform: rotateZ(45deg);
        left: 40px;
        top: 12px;
      }
      .submenu-item{
        background: rgba(66, 66, 66, 1);
        color: white;
        line-height: 30px;
        padding: 10px 8px;
        box-shadow:2px 2px 5px #333333;
        transition: all 0.3s ease-in-out;
        border-bottom: 1px solid #1f2326;
        &:nth-child(2){
          transform: translateY(-41px);
        }
        &:nth-child(3){
          transform: translateY(-82px);
        }
        &:nth-child(4){
          transform: translateY(-123px);
        }
        &:nth-child(5){
          transform: translateY(-164px);
        }
        &:last-child{
          border: none;
        }
        &:hover{
           background: rgb(4, 121, 231);
        }
      }
    }
    &:hover{
      cursor: pointer;
      color: #113f6c;
      i{
        transform: rotateZ(180deg);
      }
      .submenu{
        opacity: 1;
        pointer-events: all;
        .submenu-item{
          height: auto;
          transform: translateY(0);
        }
      }
    }
    &.active{
      color: rgb(9, 140, 248);
    }
  }
}
.el-menu{
  &.el-menu--horizontal{
    &.el-menu-demo{
      border-bottom: solid 1px gray;
    }
  }
}

</style>